<template>
  <view class="warnObject">
    <view class="objArea">
      <view class="ail">
        <checkbox-group @change="sdas">
          <label class="radio">
            <checkbox value="r1" :checked="allChecked" />
            <text>全选</text>
          </label>
        </checkbox-group>
      </view>
      <view class="list" v-for="x in treeNode" :key="x.id">
        <view class="row" @click.stop="openTree(x.id)">
          <checkbox-group @change="checkboxChange">
            <label class="radio">
              <checkbox :value="value" :checked="x.checked" />
              <text>{{ x.name }}</text>
            </label>
          </checkbox-group>
          <image v-if="!judge(x.id)" src="@/static/image/bottom.svg" />
        </view>
        <view
          class="tree"
          v-if="x.children && x.children.length > 0"
          v-show="x.show"
        >
          <treeItem :treeNode="x.children" @click="openTree" />
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import treeItem from "./treeItem";
export default {
  name: "treeItem",
  components: { treeItem },
  props: {
    treeNode: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      allChecked: false,
      // show: false,
      showArr: [],
      current: "",
      value: "",
    };
  },
  created() {
    this.treeNode.forEach((item) => {
      if (item.id !== undefined) {
        this.showArr.push(item.id);
      }
    });
  },
  methods: {
    checkboxChange: function (e) {
      var items = this.treeNode,
        values = e.detail.value;
      for (var i = 0, lenI = items.length; i < lenI; ++i) {
        const item = items[i];
        if (values.includes(item.value)) {
          this.$set(item, "checked", true);
        } else {
          this.$set(item, "checked", false);
        }
      }
    },
    openTree(id) {
      console.log(id);
      this.$emit("click", id);
    },
    judge(id) {
      const reg = /^\d{3}$/;
      return reg.test(id);
    },
  },
};
</script>

<style lang="scss" scoped>
@import "@/static/common.scss";
.warnObject {
  .objArea {
    padding: 0 30rpx;
    box-sizing: border-box;
    .ail {
      width: 100%;
      height: 72rpx;
      background-color: rgba($color: #2e73fc, $alpha: 0.1);
      display: flex;
      align-items: center;
      padding: 0 30rpx;
      box-sizing: border-box;
      color: #2e73fc;
      // margin-bottom: 30rpx;
      font-size: 30rpx;
      checkbox {
        margin-right: 20rpx;
      }
    }
    .list {
      width: 100%;
      // height: 108rpx;
      background-color: #fff;
      // margin-bottom: 30rpx;
      .row {
        height: 108rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 30rpx;
        box-sizing: border-box;
        font-size: 34rpx;
        checkbox {
          margin-right: 20rpx;
        }
        image {
          width: 40rpx;
          height: 40rpx;
          transform: rotate(-90deg);
          display: block;
        }
      }
      .area {
        padding: 0 30rpx;
        box-sizing: border-box;
        .row {
          border-bottom: 1rpx solid #f5f7fb;
        }
      }
    }
  }
}
</style>